<template>
  <view class="page">
    <!-- 搜索栏 -->
    <SearchBar placeholder="请输入设计师" @change="bindIpt"> </SearchBar>
    <div class="nav-list">
      <div class="nav-item" :class="{ active: navTab === 'orders' }" @click="bind('orders')">销售量</div>
      <div class="nav-item" :class="{ active: navTab === 'productsLike' }" @click="bind('productsLike')">获赞数</div>
      <div class="nav-item" :class="{ active: navTab === 'follows' }" @click="bind('follows')">粉丝数</div>
    </div>
    <view class="designer-grid">
      <ScrollList :finished="isFinished" :loading="isLoading" :show-empty="isFinished && !list?.length" style="height: calc(100vh - 100rpx); width: calc(100vw - 32rpx); display: flex; flex-direction: column; gap: 16rpx" @load="load" @refresh="reset">
        <template v-for="(product, index) in list" :key="index">
          <Designer :designer="product" :show-good="true" style=""> </Designer>
          <div style="width: 100%; height: 16rpx; background: #f3f7f8"></div>
        </template>
      </ScrollList>
    </view>
  </view>
</template>

<script setup lang="ts">
import SearchBar from '@/components/searchBar/SearchBar.vue';
import Designer from '@/components/designer/Designer.vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { searchDesignersData } from '@/api/searchApi';
import { ref } from 'vue';
import ScrollList from '@/components/scroll-list/scroll-list.vue';
import { usePagination } from '@/hooks/usePagination';

const input = ref('');
const navTab = ref('orders');

/**
 * 搜索设计师
 */
function searchDesigners(page: number, pageSize: number) {
  const data = { keyword: input.value, page, orderBy: navTab.value };
  return searchDesignersData(data);
}

const { list, isLoading, load, reset, isFinished } = usePagination(searchDesigners);

const bindIpt = (value) => {
  console.error('bindIpt', value)
  input.value = value;
  reset();
};

const bind = (type) => {
  navTab.value = type;
  reset();
};

onShow(() => {
  reset();
});
</script>

<style scoped lang="scss">
.nav-list {
  display: flex;
  justify-content: space-between;
  padding: 0 84rpx;
  background: #fff;
  margin-top: 16rpx 0 0;
  border-bottom: 1rpx solid #e4e4e4;
  .nav-item {
    padding: 16rpx 24rpx;
    color: #333;
    font-size: 28rpx;
    border-bottom: 4rpx solid transparent;
    &.active {
      color: #ff5a5f;
      border-bottom: 4rpx solid #ff5a5f;
      border-radius: 4rpx;
    }
  }
}
.designer-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 16rpx;
  padding: 0 16rpx;
  background: #f3f7f8;
}
</style>
